<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import dayjs from 'dayjs';
import DayEcharts from './modules/day-echarts.vue';
const searchParams = ref({
  prodNo: null,
  lotNo: null,
  time: null
});
const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'input',
    key: 'lotNo',
    label: '批卡号',
    placeholder: '请输入批卡号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true // 显示时分秒选择
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.[0]) {
    params.beginTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'requestNo',
    dataIndex: 'requestNo',
    title: '报废单号',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '批卡号',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'ltBugName',
    dataIndex: 'ltBugName',
    title: '缺陷名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true,
    customRender: ({ record }) => {
      // 字体加粗且是红色
      return <span class="fonw-900 color-red">{record.ltBugName}</span>;
    }
  },
  {
    key: 'deptCaption',
    dataIndex: 'deptCaption',
    title: '责任部门',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '责任工艺',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'pcsQty',
    dataIndex: 'pcsQty',
    title: '报废PCS数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'unitArea',
    dataIndex: 'unitArea',
    title: '单元面积',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true
  },
  {
    key: 'scrapArea',
    dataIndex: 'scrapArea',
    title: '报废面积',
    align: 'center',
    checked: true,
    ellipsis: true,
    sorter: true,
    customRender: ({ record }) => {
      // 字体加粗且是红色
      return <span class="fonw-900 color-red">{record.scrapArea}</span>;
    }
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '报废人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    sorter: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '报废时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150,
    sorter: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];
const tableRef = ref(null);

const tabaleSelect = ref([]);
function tableSelectChange(val) {
  tabaleSelect.value = val;
}

function search() {
  tableRef.value.getData(1);
}

function reset() {
  searchParams.value = {
    lotNo: null,
    prodNo: null,
    time: null
  };
  nextTick(() => {
    search();
  });
}
</script>

<template>
  <div class="frame-management-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <div class="min-h-38% flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
      <Table
        ref="tableRef"
        v-model:searchParams="searchData"
        :column="column"
        show-row-selection
        row-key="frameId"
        auto-generate-uuid
        :scroll="{ y: 'auto' }"
        is-init-get-data
        url="/erpsyncmes/baseData/bugRequestLog/view/list"
        @table-select-change="tableSelectChange"
      ></Table>
    </div>
    <!-- 图表 -->
    <div
      class="min-h-62% flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
      style="background-color: rgb(250, 250, 250)"
    >
      <DayEcharts />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
